<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
</head>
<script src="jquery-1.7.1.min.js"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=wWy2A8K94nhntYTYUHS19RXW"></script>
<style>
*{margin:0;padding:0;}

.range{width:95%;height:40px;position:relative;margin-bottom:10px;}
.range .range-btn{
    width:100%;
}

.range .range-btn::-webkit-slider-thumb {
    -webkit-appearance: none;
    cursor: default;
    height: 20px;
    width: 15px;
    -webkit-box-shadow: 0 -1px 1px black inset;
    background:red;
}
.range .range-btn{
    -webkit-box-shadow: 0 1px 0 0px #424242, 0 1px 0 #060607 inset, 0px 2px 10px 0px black inset, 1px 0px 2px rgba(0, 0, 0, 0.4) inset, 0 0px 1px rgba(0, 0, 0, 0.6) inset;
    background:yellow;
    -webkit-appearance: none;height:10px;
}
.range .time{
    height:20px;
}
.range .time span{
    width:2.083%;height:inherit;display:inline-block;
    float:left;box-sizing: border-box;border-right:1px solid red;
    position:relative;
}
.range .time span b{
    position:absolute;bottom:-10px;width:100%;text-align:center;left:50%;font-size:12px;
}
.range .time .duan{
    height:10px;
}

</style>
<body>
<div>
    <a href="javascript:showDevice(0);">数据一</a>
    <a href="javascript:showDevice(1);">数据二</a>
</div>
    <div class="time-data"></div>
    <div class="range">
        <input class="range-btn" type="range" value="0" onmouseup="range.rangeUp(this)" onmousedown="range.rangeDown()">
        <div class="time"></div>
	</div>
    <div id="allmap" style="height:500px"></div>
</body>
</html>
<script src="map.js"></script>